<template>
    <div>
        <div class="category-list">
            <div class="category-item" v-for="item in categoryList" :key="item.type" @click="goto(item.id)">
                <div class="item-image">
                    <img :src="item.image">
                </div>
                <div class="item-title">{{item.type}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import category from '@/api/category'

export default {
    data(){
        return{
            categoryList: []
        }
    },
    created(){
        this.getCategory()
    },  
    methods:{
        getCategory(){
            
            category.getCategory()
            .then(res => {
                if(res.code == 200){
                    this.categoryList = res.data.typeList
                }
                else{

                }
            })
        },
        goto(id){
            this.$router.push({name:'categoryDetail', params:{id}})
        }
    }
}
</script>

<style scoped>
.category-list{
    display:flex;
    justify-content: space-around;

    flex-wrap: wrap;;

    text-align: center;
}

.category-item{
    width:12%;

    padding:0 5%;

    margin-top:20px;
}

.item-image img{
    height: 100%;
    width: 100%;
}

</style>